<template>
	<view>
		<view class="cu-form-group">
			<view class="title">签到时间：</view>
			<input class="inpt" disabled="true" name="input" :value="GPSTime"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">客户：</view>
			<input class="inpt" disabled="true" name="input" v-model="ClientName" @tap="chooseC"></input>
			<view class="" v-if="ClientName !=''" @tap="clearInput(0)">
				<text class="cuIcon-close"></text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">备注：</view>
			<input class="inpt" placeholder="请输入备注" name="input" v-model="Remark"></input>
			<view class="" v-if="Remark !=''" @tap="clearInput(1)">
				<text class="cuIcon-close"></text>
			</view>
		</view>
		<view class="cu-form-group">
			<view class="title">图片：</view>
			<input class="inpt" placeholder="<点击图片拍照>" name="input" disabled="true"></input>
		</view>
		<view class="cu-form-group tupian">
			<view class="grid col-1 grid-square flex-sub">
				<view class="bg-img" v-for="(imgUrl,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgUrl">
					<image :src="imgUrl" mode="aspectFill"></image>
					<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
						<text class='cuIcon-close'></text>
					</view>
				</view>
				<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
					<text class='cuIcon-cameraadd' style="font-size: 60px;"></text>
				</view>
			</view>
		</view>
		<view class="addbox">
			<button class="addbtn" @tap="save">保存当前位置</button>
		</view>
		<!--选择客户弹窗-->
		<view class="cu-modal" :class="CustomerModal?'show':'hide'" @tap="hideModal1">
			<view class="cu-dialog" @tap.stop="">
				<view class="cu-bar bg-white justify-end">
					<view class="content">客户选择</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="searchStore">
						<input placeholder="请输入名称" v-model="SearchCName" />
						<button @tap="searchStore(1)">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in CuList" :key="index" @tap="CustomerChange(index)">{{item.ClientName}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from "@/syApis/syAddOrder/syaddApis.js"
	import * as Api1 from "@/syApis/sySet/sySet.js"
	export default {
		data() {
			return {
				// Goods_Image_Path1: [],
				imgList: [],
				GPSTime: '',
				ClientName: '',
				Remark: '',
				CustomerModal: false,
				CuList: [],
				radio: '',
				GPSX: '',
				GPSY: '',
				hasLocation: false,
				SearchCName: '',
			}
		},
		created() {
			let date = new Date();
			// this.GPSTime=date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " +date.getHours();
			this.GetClientSaleMessage();
			this.getTime();
		},
		methods: {
			getTime() {
				let yyyy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
				let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				this.GPSTime = yyyy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
			},
			ChooseImage() {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (this.imgList.length != 0) {
							this.imgList = this.imgList.concat(res.tempFilePaths)
						} else {
							this.imgList = res.tempFilePaths
						}
					}
				});
			},
			// 			ChooseImage() {
			// 				uni.chooseImage({
			// 					count: 1, //默认9
			// 					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 					sourceType: ['camera'], //从相册选择
			// 					success: (chooseImageRes) => {
			// 						this.imgList = [];
			// 						const tempFilePaths = chooseImageRes.tempFilePaths;
			// 						// console.log(tempFilePaths);
			// 						let item = {
			// 							imgUrl: tempFilePaths[0]
			// 						};
			// 						this.imgList.push(item);
			// 
			// 					}
			// 				});
			// 			},

			ViewImage(e) {
				var current = e.currentTarget.dataset.url
				uni.previewImage({
					current: current,
					urls: this.imgList
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '注意',
					content: '确定要删除图片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
				console.log(e)
			},
			chooseC(res) {
				this.CustomerModal = true;
				this.GetClientSaleMessage()
				for (let item in this.CuList) {
					if (item == res.index) {
						this.ClientName = this.CuList[item].ClientName;
					}
				}
			},
			hideModal() {
				this.CustomerModal = false
			},
			GetClientSaleMessage(Filter = '') {
				let data = {
					Filter: "IsClient<>0" + Filter
				};
				var _this = this;
				Api.GetClientSaleMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							_this.Clist = [];
							_this.CuList = res.data.ResultMsg;
							for (let item in res.data.ResultMsg) {
								// //console.tablele(res.data.ResultMsg)
								_this.Clist.push(res.data.ResultMsg[item].ClientName);
								_this.SearchCName = "";
							}
						}
					} else {
						Api.ShowTip("服务器开小差了");
					}
				})
			},
			CustomerChange(e) {
				console.log(e)
				this.CustomerModal = false;
				this.ClientName = this.CuList[e].ClientName;
			},
			save() {
				if (this.ClientName == "") {
					Api1.showTip("客户名称不能为空")
				} else if (this.imgList.length == 0) {
					Api1.showTip("照片不能为空")
				} else {
					uni.showLoading({
						title: "提交中..",
					mask:false
					});
					var that = this;
					uni.uploadFile({
						url: 'http://192.168.1.51:9000/api/UpLoadPicture', //仅为示例，非真实的接口地址
						filePath: that.imgList[0],
						name: 'picture',
						formData: {
							"Database": "FastApp",
							"AddName": "GPS"
						},
						success: (uploadFileRes) => {
							let res = JSON.parse(uploadFileRes.data);
							this.Goods_Image_Path1 = res.ResultMsg;
							that.saveInfo()
						},
						fail(e) {
							uni.hideLoading();
							uni.showToast({
								title: "提交失败，检查图片大小是否小于400K",
								duration: 1000
							})
						}
					});


				}

			},
			saveInfo() {
				var that = this;
				let CreateID = uni.getStorageSync("UserCode");
				let Save_M_Data_Json = {
					GPSTime: that.GPSTime,
					Remark: that.Remark,
					Goods_Image_Path1: that.Goods_Image_Path1,
					ClientName: that.ClientName,
					CreateID: that.CreateID,
					GPSY: that.GPSY,
					GPSX: that.GPSX,
					EmpName: that.EmpName,

				}
				let data = {
					Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
				};
				console.log(Save_M_Data_Json)
				Api1.Add_GPSMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api1.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							Api1.showTip(res.data.ErrorMsg);
						} else {
							Api1.showTip("保存成功");
							that.Remark = "";
							that.ClientName = "";
							that.imgList = "";
							that.getTime()
							console.log(that.GPSX)
						}
					} else {
						Api1.showTip("服务器开小差了");
					}
				});
			},
			//保存图片接口
			saveImg(Filter) {
				var that = this
				let data = {
					AddName: 'GPS',
					picture: that.Goods_Image_Path1
				}
				Api1.UpLoadPicture(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api1.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							Api1.showTip(res.data.ErrorMsg);
						} else {
							Api1.showTip("保存成功");
							// that.Remark = "";
							// that.ClientName = "";
							// that.Goods_Image_Path1 = "";
							// that.getTime()
							// console.log(that.GPSX)
						}
					} else {
						Api1.showTip("服务器开小差了");
					}
				});
			},
			clearInput(e) {
				if (e == 0) {
					this.ClientName = "";
				} else if (e == 1) {
					this.Remark = "";
				}

			},
			//搜索
			searchStore(index) {
				if (this.SearchCName != '') {
					let Filter = "and ClientName like '%" + this.SearchCName + "%'";
					this.GetClientSaleMessage(Filter);
				} else {
					this.GetClientSaleMessage();
				}
			},

		},
	}
</script>

<style>
	@import url("../../style/weui.css");

	.tupian {
		justify-content: center;
	}

	.addbox {
		margin: 0 auto;
	}

	.addbtn {
		width: 85%;
		background: rgba(124, 170, 216, 1);
		color: #FFFFFF;
	}

	.padding-xl .searchStore {
		display: flex;
		width: 100%;
		margin: auto;
		height: 45px;
		padding-top: 5px;
		font-size: 14px;
	}
	
	.padding-xl .searchStore input {
		flex: 1;
		height: 35px;
		border: 1px solid #CCC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		padding-left: 10px;
	}
	
	.padding-xl {
		padding: 10px;
	
	}
	
	.padding-xl .searchStore button {
		font-size: 14px;
		color: #FFF;
		padding-left: 8px;
		padding-right: 8px;
		height: 35px;
		line-height: 35px;
		border-radius: 0px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		text-align: center;
		background: rgba(124, 170, 216, 1);
	}
	
	.padding-xl .StoreListWrap {
		height: 250px;
		overflow: auto;
	}
	
	.padding-xl .StoreListWrap view {
		height: 40px;
		line-height: 40px;
		text-align: left;
		border-bottom: 1px solid #CCC;
		padding-left: 8px;
		font-size: 15px;
	}
</style>
